<template>
  <vxe-modal v-model="props.show" :title="editData?.categoryId?'编辑':'新增'" @close="close" width="400">
    <template #default>
      <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px" size="small">
        <el-form-item  label="收货人" prop="receiverName">
          <el-input v-model="formdata.receiverName" :maxlength="24" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="手机号码" prop="receiverPhone">
          <el-input v-model="formdata.receiverPhone" :maxlength="11" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-cascader v-model="formdata.address"
            filterable
            style="width:100%;" 
            :props="{children:'sub',value:'name',label:'name'}"
            @change="addressList"
            :options="selectList" clearable></el-cascader>
          <el-input v-model="formdata.receiverDetailAddress" :maxlength="50" style="margin-top:4px" placeholder="详细地址" />
        </el-form-item>
        <el-form-item />
        <el-form-item  span="24">
            <el-button type="primary" @click="save"><vxe-icon name="check"></vxe-icon> 提交</el-button>
            <el-button @click="close"><vxe-icon name="close"></vxe-icon> 取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </vxe-modal>

</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { message } from '@/utils/element'
import areaList from '@/api/area'
import { addAddress,eidtAddress } from '@/api/system'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()

const props = defineProps({
show: {
  type: Boolean,
  default: false
},
title: String,
editData: Object,
})
const emit = defineEmits(['close', 'success'])

const formdata = ref({})
const ruleFormRef = ref(null)
const selectList = ref(areaList.filter((item)=>{return item.name !='全国'}))

const rules = reactive({
  receiverName: [
  { required: true, message: '此项不能为空', trigger: 'blur' },
  ],
  receiverPhone: [
    { required: true, message: '此项不能为空', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '此项不能为空', trigger: 'blur' }
  ],
})

onMounted(() => {
  if(props.editData?.userAddressId){
    formdata.value=props.editData
    formdata.value.address=[props.editData.receiverProvince,props.editData.receiverCity,props.editData.receiverRegion]
  }
})

const save = async() => {
await ruleFormRef.value.validate(async(valid, fields) => {
  if (valid) {
    let res = {}
    formdata.value.realName =userStore.userInfo.nickName
    formdata.value.userId =userStore.userInfo.userId
    if (props.editData?.userAddressId) {
      res = await eidtAddress(formdata.value)
    } else {
      res = await addAddress(formdata.value)
    }
    if (res.code == 0 || res.success) {
      message('数据提交成功', 2)
      emit('success',formdata.value)
      close()
    } else {
      message(res.message, 3)
    }
  }
})
}

const  addressList =(val)=>{
  if(val){
    formdata.value.receiverProvince=val[0]
    formdata.value.receiverCity=val[1]
    formdata.value.receiverRegion=val[2]
  }
}

const close = () => {
emit('close', false)
}
</script>
<style lang="scss" scoped>
  .addBox{
      display: flex;
      height: 40px;
      line-height: 30px;
      .label{
          width: 70px;
      }
  }
</style>
